<template>
  <div class="mui-pages record-member-lists" style="background-color: #fff;">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <a @click="fn.back()" href="javascript:void(0)"><img class="back-btn" src="../../../../static/images/back.png"></a>
        <div class="header-search flex-center">党建考核</div>
        <div class="header-right flex-center" @click="goAssessRules">考核规则</div>
      </div>
    </header>
    <div class="build-tabs display-flex">
      <div class="build-tabs-items" @click="changeRankType(2)" :class="{'mui-active':rankType==2}">支部党员考核</div>
      <div class="build-tabs-items" @click="changeRankType(1)" :class="{'mui-active':rankType==1}">全狱支部考核</div>
    </div>
    <div class="mui-page-content mui-pages" style="padding-top: 15px;">
      <div class="mui-scroll-wrapper" style="padding-top: 15px;">
        <div class="mui-scroll mui-scroll-wrapper" style="padding-top: 15px;">


          <cube-scroll
            ref="scroll"
            :options="options"
            @pulling-up="onPullingUp"
          >
            <cube-swipe>
              <transition-group name="swipe" tag="li">

                <li @click="goDetail(personRank)" class="mui-table-view-cell" :key="'10000000'">
                  <div class="mine-lists-content flex-between-center">
                    <div class="rangking-num flex-center">{{personRank.YEAR_RANKING_}}</div>
                    <div class="mine-lists-content flex-justify-start">
                      <div class="people-lists-touxiang"></div>
                      <p class="mine-lists-title">{{personRank.NAME_}}</p>
                    </div>
                    <div class="flex-between-center integral-num">
                      <p>积分</p>
                      <span class="mine-lists-money">{{personRank.TOTAL_SCORE_}}</span>
                    </div>
                  </div>
                </li>
                <li v-for="(item,index) in dataList" :key="index" v-if="index<3" class="mui-table-view-cell">
                  <div class="mine-lists-content flex-between-center">
                    <div class="rangking" :class="['rangking-no'+(index+1)]">NO.{{item.YEAR_RANKING_}}</div>
                    <div class="mine-lists-content flex-justify-start">
                      <div class="people-lists-touxiang"></div>
                      <p class="mine-lists-title">{{item.NAME_}}</p>
                    </div>
                    <div class="flex-between-center integral-num">
                      <p>积分</p>
                      <span class="mine-lists-money">{{item.TOTAL_SCORE_}}</span>
                    </div>
                  </div>
                </li>
                <li v-for="(item,index) in dataList" :key="index" v-if="index>2" class="mui-table-view-cell">
                  <div class="mine-lists-content flex-between-center">
                    <div class="rangking-num flex-center">{{item.YEAR_RANKING_}}</div>
                    <div class="mine-lists-content flex-justify-start">
                      <div class="people-lists-touxiang"></div>
                      <p class="mine-lists-title">{{item.NAME_}}</p>
                    </div>
                    <div class="flex-between-center integral-num">
                      <p>积分</p>
                      <span class="mine-lists-money">{{item.TOTAL_SCORE_}}</span>
                    </div>
                  </div>
                </li>


              </transition-group>
            </cube-swipe>

          </cube-scroll>


        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import footerbar from '../common/footerbar.vue'
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import moment from 'moment'

  export default {
    components: {
      footerbar
    },
    name: '',
    data() {
      return {
        fn: tools,
        groupList: {},
        dataList: [],
        personRank: {},
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        newsLists: [],
        infinite: true,
        pageIndex: 0,
        pageSize: 20,
        noData: true,
        rankType: '2' // 排名类型:'1'支部考核，'2'个人考核
      }
    },
    created() {
      this.loadData()
      this.loadSingRank(this.rankType)
      this.$store.state.rankType = this.rankType
    },
    methods: {
      changeRankType(type){
        this.rankType = type
        this.$store.state.rankType = type
        this.pageIndex = 0
        this.dataList = []
        this.loadData()
        this.loadSingRank(this.rankType)
      },
      goDetail(item){
        item.titleName = '考核积分'
        this.$store.state.buildAssessData = item
        this.$router.push({name: 'zbIntegral'})
      },
      loadSingRank(rankType){
        this.getOwnYearOrOwnGourp(rankType)
      },
      loadData(pageIndex) {
        pageIndex = pageIndex || this.pageIndex
        // 考核对象:'1'支部考核，'2'个人考核 ,
        let data = {
          checkObject: this.rankType,
          pageIndex: pageIndex,
          pageSize: this.pageSize,
          token: tools.getToken(),
          year: moment().format('YYYY')
        }
        let api = {
          '1': 'rankingList',
          '2': 'rankingList'
        }
        loginService[api[this.rankType]](data).then(res => {
          if (res.code !== 200 || res.data.length < 1) {
            this.$refs.scroll.forceUpdate()
            return tools.tip(res.total === 0 ? '暂无数据' : '已无更多数据')
          }
          this.dataList = this.dataList.concat(res.data)
          setTimeout(() => {
            this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = !true
          }, 100)
        })
      },
      // 个人排名
      getOwnYearOrOwnGourp(rankType){
        // 考核对象:'1'支部考核，'2'个人考核 ,
        let data = {
          checkObject: rankType,
          token: tools.getToken(),
          year: moment().format('YYYY')
        }
        loginService.getOwnYearOrOwnGourp(data).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.personRank = res.data
          }
        })
      },
      loadDataGroup() {
        // 考核对象:'1'支部考核，'2'个人考核 ,
        let data = {
          checkObject: '1',
          pageIndex: 0,
          pageSize: 10,
          token: tools.getToken(),
          year: moment().format('YYYY')
        }
        loginService.rankingList(data).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.groupList = res.data
          }
        })
      },
      onPullingUp () {
        console.log('onPullingUp')
        this.loadData(++this.pageIndex)
      },
      goAssessRules() {
        this.$router.push({name: 'assessRules'})
      }
    }
  }
</script>
<style scoped="">
  .build-tabs .build-tabs-items {
    text-align: center;
  }
</style>
